<template>
  <div id="shelljp">
    <div class="jp_content">
      <div class="title1">增值税普通发票<span>（卷票）</span></div>
      <div class="title2">发票联</div>
      <img :src="imgZL" class="yz" />
      <div class="jpContent">
        <div>
          <span>发票代码：</span>{{ tickinfo.invoiceCode }}
        </div>
        <div>
          <span>发票号码：</span>{{ tickinfo.invoiceNo }}
        </div>
        <div>
          <p><span>机打号码：</span>{{ tickinfo.invoiceNo }}</p>
          <p><span>机器编号：</span>{{ tickinfo.machineNo }}</p>
        </div>
        <div>
          <span>销售方名称：</span>{{ tickinfo.salerName }}
        </div>
        <div>
          <span>纳税人识别号：</span>{{ tickinfo.salerTaxNo }}
        </div>
        <div>
          <p><span>开票日期：</span>{{ tickinfo.invoiceDate }}</p>
          <p><span>收款员：</span>{{ tickinfo.receiver }}</p>
        </div>
        <div>
          <span>购买方名称：</span>{{ tickinfo.buyerName }}
        </div>
        <div>
          <span>纳税人识别号：</span>{{ tickinfo.buyerTaxNo }}
        </div>
      </div>
      <div class="jpItem">
        <div class="title">
          <span>项目</span>
          <span>单价</span>
          <span>数量</span>
          <span>金额</span>
        </div>
        <template v-for="(v, i) in tickinfo.detail">
          <div :key="i" class="item">
            <span>{{ v.goodsName }}</span>
            <span>{{ v.unitPrice }}</span>
            <span>{{ v.num | tofixed }}</span>
            <span>{{ toDecimal2(Number(v.noTaxAmount) + Number(v.taxAmount)) }}</span>
          </div>
        </template>
      </div>
      <ul class="jpGather">
        <li><span>备注：</span>{{ tickinfo.remark }}</li>
        <li><span>合计金额（小写）：</span>￥{{ toDecimal2(tickinfo.totalAmount) }}</li>
        <li><span>合计金额（大写）：</span>{{ Arabia_To_chinese(tickinfo.totalAmount) }}</li>
        <li><span>校验码：</span>{{ getJym }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
import popdata from "./common";
export default {
  name: 'ZZSJP',
  mixins: [popdata],
  data() {
    return {};
  },
  props: {
    tickinfo: {
      default: null
    }
  },
  filters: {
    tofixed: function(num) {
      console.log(num);
      return parseFloat(num).toFixed(2);
    }
  },
  computed: {
    getJym: function() {
      if (this.tickinfo.verifyCode && this.tickinfo.verifyCode != null) {
        return this.tickinfo.verifyCode.replace(/\s/g, '').replace(/(.{4})/g, '$1 ');
      }
      return '';
    }
  }
};
</script>

<style scoped lang="scss">
$color1:#904e31;
#shelljp * {
  font-size: 14px;
}
#shelljp {
  * { box-sizing: border-box; margin: 0; padding: 0; }
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: #f7f7f7;
  padding: 30px 0;
  overflow: auto;
  .jp_content {
    width: 552px;
    margin: 0 auto;
    position: relative;
    background: #fff;
    padding: 0 30px 36px;
    font-family: 'STZhongsong';
    .title1 {
      font-size: 24px;
      padding: 31px 0 6px;
      line-height: 33px;
      letter-spacing: 2.2555555555555555px;
      color: $color1;
      text-align: center;
      font-family: 'STKaiti';
      span {
        font-size: 14px;
      }
    }
    .title2 {
      font-size: 18px;
      line-height: 24px;
      letter-spacing: 5.735555555555556px;
      color: $color1;
      text-align: center;
      font-family: 'STKaiti';
    }
    .yz {
      position: absolute;
      top: 28px;
      height: 72px;
      z-index: 0;
      left: 50%;
      opacity: 0.8;
      transform: translate(-50%);
    }
    .jpContent {
      padding: 26px 0 30px;
      >div {
        line-height: 20px;
        color: #333;
        width: 100%;
        text-align: left;
        display: flex;
        >span {
          color: $color1;
          font-family: 'STKaiti';
        }
        &:not(:nth-last-child(1)) {
          margin-bottom: 5px;
        }
        >p {
          span {
            color: $color1;
            font-family: 'STKaiti';
          }
          &:nth-child(1) {
            width: 60%;
          }
          &:nth-child(2) {
            width: 40%;
          }
        }
      }
    }
    .jpItem {
      min-height: 190.99px;
      margin-bottom: 8px;
      > div {
        display: flex;
        span {
          width: 23%;
          &:first-child {
            width: 31%;
          }
        }
        &.title {
          color: $color1;
          font-family: 'STKaiti';
          text-align: center;
        }
        &.item {
          text-align: right;
          span:nth-child(1) {
            text-align: left;
          }
        }
      }
    }
    .jpGather {
      li {
        line-height: 20px;
        &:not(:nth-last-child(1)) {
          margin-bottom: 5px;
        }
        span {
          color: #9E520A;
          font-family: 'STKaiti';
        }
      }
    }
  }
}
</style>
